<template>
  <div>
    <!-- 定义页面的结构 -->
    <!-- 顶部导航栏 -->
    <div class="header">易洁家政</div>
    <!-- 顶部轮播区域 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipeData" :key="item.id">
          <img :src="item.url" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 菜单栏 -->
    <div class="menu">
      <van-grid :column-num="3">
        <van-grid-item
          v-for="(category, index) in categoryDate"
          :key="category.id"
          :icon="category.icon"
          :text="category.name"
          @click="productPage(category.id, (activeKey = index))"
        />
      </van-grid>
    </div>
    <!-- 底部产品展示区域 -->
    <div class="product">
      <van-card
        v-for="product in productDate"
        :key="product.id"
        :desc="product.description"
        :title="product.name"
        :thumb="product.photo"
      />
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
import { get } from "@/http/axios";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      swipeData: [],
    };
  },
  methods: {
    productPage(id, activeKey) {
      this.$router.push({
        path: "/manager/product",
        query: { id, activeKey },
      });
    },
    // 引入category vuex的方法
    ...mapActions("category", ["getAllCategory"]),
    // 引入porduct vuex的方法
    ...mapActions("product", ["getAllProduct"]),
    async getAllSwipeData() {
      let res = await get("/carousel/query", { status: "正常" });
      this.swipeData = res.data.data;
    },
    // 查询栏目数据
    queryCategory() {
      let data = {
        page: 1,
        pageSize: 100,
      };
      this.getAllCategory(data);
    },
    //查询产品
    queryProduct() {
      let data = {
        page: 1,
        pageSize: 100,
      };
      this.getAllProduct(data);
    },
  },
  computed: {
    ...mapState("category", ["categoryDate"]),
    ...mapState("product", ["productDate"]),
  },
  created() {
    this.getAllSwipeData();
    this.queryCategory();
    this.queryProduct();
  },
};
</script>

<style scoped>
.my-swipe,
.my-swipe img {
  width: 100%;
  height: 180px;
  margin: 0 auto;
  border-radius: 8px;
}
.swipe {
  width: 80%;
  height: 140px;
  position: absolute;
  background-color: #9002bf;
  top: 120px;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
}
.header {
  height: 180px;
  background-image: linear-gradient(90deg, #a4edff, #3628f8);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  color: #fff;
  text-align: center;
  font-weight: 900;
  font-size: 23px;
}
.menu {
  padding: 10px 15px;
  margin-top: 90px;
}
.product {
  width: 100%;
}
.van-card {
  margin: 0 auto;
  width: 50%;
  display: inline-block;
  border: 1px solid #a4edff;
  border-radius: 8px;
}
.van-card__title {
  font-size: 13px;
}
</style>